import React, { Component } from 'react';
import pic from '../assets/1.jpg'
import '../styles/Cate.scss'
class Cate extends Component {
    constructor(props){
        super(props)
        this.state ={
            navindex:0,
            catelist:[
                {
                    name:'活动专区',
                    list2:[
                        {
                         name:'专场特卖',
                         list3:[
                            {pic,name:'长虹电视'},{pic,name:'胖头鱼'},
                            {pic,name:'回稷山'},{pic,name:'五粮液'},
                         ]
                        },
                        {
                         name:'促销特卖',
                         list3:[
                            {pic,name:'洋河'},{pic,name:'红米'},
                            {pic,name:'小米'},{pic,name:'三星55英寸'},
                         ]
                        }
                    ]
                },
                {
                    name:'品牌',
                    list2:[
                        {
                         name:'专场品牌',
                         list3:[
                            {pic,name:'长虹电视'},{pic,name:'胖头鱼'},
                            {pic,name:'回稷山'},{pic,name:'五粮液'},
                         ]
                        },
                        {
                         name:'促销品牌卖',
                         list3:[
                            {pic,name:'洋河'},{pic,name:'红米'},
                            {pic,name:'小米'},{pic,name:'三星55英寸'},
                         ]
                        }
                    ]
                },
                {
                    name:'美容护肤',
                    list2:[
                        {
                         name:'面部护理',
                         list3:[
                            {pic,name:'卸妆'},{pic,name:'洁面乳'},
                            {pic,name:'乳液'},{pic,name:'面霜'},
                         ]
                        },
                        {
                         name:'手部护理',
                         list3:[
                            {pic,name:'护手霜'},{pic,name:'红米'},
                            {pic,name:'小米'},{pic,name:'三星55英寸'},
                         ]
                        }
                    ]
                },
                {
                    name:'彩妆',
                    list2:[
                        {
                         name:'彩妆',
                         list3:[
                            {pic,name:'彩妆1'},{pic,name:'彩妆2'},
                            {pic,name:'彩妆3'},{pic,name:'彩妆4'},
                         ]
                        },
                        {
                         name:'美妆',
                         list3:[
                            {pic,name:'美妆1'},{pic,name:'美妆2'},
                            {pic,name:'美妆3'},{pic,name:'美妆4'},
                         ]
                        }
                    ]
                },
                {
                    name:'香水',
                    list2:[
                        {
                         name:'男士香水',
                         list3:[
                            {pic,name:'男士香水1'},{pic,name:'男士香水2'},
                            {pic,name:'男士香水3'},{pic,name:'男士香水4'},
                         ]
                        },
                        {
                         name:'女士香水',
                         list3:[
                            {pic,name:'女士香水1'},{pic,name:'女士香水2'},
                            {pic,name:'女士香水3'},{pic,name:'女士香水4'},
                         ]
                        }
                    ]
                },
                {
                    name:'酒类',
                    list2:[
                        {
                         name:'国产',
                         list3:[
                            {pic,name:'国产1'},{pic,name:'国产2'},
                            {pic,name:'国产3'},{pic,name:'国产4'},
                         ]
                        },
                        {
                         name:'进口',
                         list3:[
                            {pic,name:'进口1'},{pic,name:'进口2'},
                            {pic,name:'进口3'},{pic,name:'进口4'},
                         ]
                        }
                    ]
                },
                {
                    name:'腕表首饰',
                    list2:[
                        {
                         name:'国产',
                         list3:[
                            {pic,name:'国产1'},{pic,name:'国产2'},
                            {pic,name:'国产3'},{pic,name:'国产4'},
                         ]
                        },
                        {
                         name:'国外',
                         list3:[
                            {pic,name:'国外1'},{pic,name:'国外2'},
                            {pic,name:'国外3'},{pic,name:'国外4'},
                         ]
                        }
                    ]
                },
            ]
        }
    }
    navClick(index){
        this.setState({navindex:index})
    }
    render() {
        return (
            <div  className='cate'>
                <div className='left'>
                    {
                        this.state.catelist.map((item,index)=>{
                            return(
                                <div className={'item ' + (this.state.navindex ===index ? 'active':'') }  key={index} onClick={( )=>{this.navClick(index)}}>{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className='right'>
                    {
                        this.state.catelist[this.state.navindex].list2.map((item2,index)=>{
                            return(
                                <div className='list2' key={index}>
                                    <h3>{item2.name}</h3>
                                    <div className='list3'>
                                        {
                                            item2.list3.map((item3,index)=>{
                                                return (
                                                    <div className='item3' key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className='name'>{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }

                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                
            </div>
        );
    }
}

export default Cate;